<script setup lang="ts">
import type { PrizeQuery } from '@/types/query/PrizeQuery'
import type { PrizeVO } from "@/types/vo/PrizeVO";
import { getPrizePageService } from "@/apis/front/prize";

const formData = ref<PrizeQuery>({
  pageNum: 1,
  pageSize: 10,
  prizeName: '',
})
const prizeList = ref<PrizeVO[]>([])
const loading = ref(false)
const total = ref(0)
const getList = async () => {
  try {
    loading.value = true
    const { data } = await getPrizePageService(formData.value)
    prizeList.value = data.data.records
    total.value = data.data.total
  } finally {
    loading.value = false
  }
}
const onSearch = () => {
  formData.value.pageNum = 1
  formData.value.pageSize = 10
  getList()
}

onMounted(() => {
  getList()
})
</script>

<template>
  <div class="prize-page">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-inner">
        <n-input
          v-model:value="formData.prizeName"
          placeholder="请输入奖品名称"
          class="search-input"
        >
          <template #prefix>
            <div class="search-icon">
              <Icon icon="ant-design:search-outlined" />
            </div>
          </template>
          <template #suffix>
            <n-button
              @click="onSearch"
              class="search-btn"
              :focusable="false"
            >
              查询
            </n-button>
          </template>
        </n-input>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="prize-container">
      <n-spin :show="loading">
        <div class="prize-list">
          <PrizeItem v-for="item in prizeList" :key="item.id" :prize="item" />
        </div>
      </n-spin>

      <!-- 分页 -->
      <div class="pagination-container">
        <n-pagination
          v-model:page="formData.pageNum"
          :item-count="total"
          :page-size="formData.pageSize"
          @update:page="getList"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.prize-page {
  width: 100%;
  min-height: 100%;
  background-color: #f9f9f9;
  padding-bottom: 30px;
}

.search-container {
  background-color: #fff;
  padding: 20px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  margin-bottom: 20px;
}

.search-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  justify-content: center;
}

.search-input {
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
  overflow: hidden;
}

.search-input :deep(.n-input__border),
.search-input :deep(.n-input__state-border) {
  border: 1px solid #e8e8e8 !important;
}

.search-input :deep(.n-input-wrapper) {
  padding-right: 0;
}

.search-icon {
  color: #bfbfbf;
  margin-right: 4px;
}

.search-btn {
  border-radius: 0 4px 4px 0;
  margin-right: -12px;
  background-color: #f2f2f2;
  color: #595959;
  border: none;
  font-size: 14px;
  padding: 0 20px;
}

.search-btn:hover {
  background-color: #e6e6e6;
  color: #262626;
}

.prize-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.prize-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  padding: 20px 0;
}

@media (max-width: 768px) {
  .prize-list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
  }

  .search-container {
    padding: 16px 0;
  }
}
</style>
